<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet"
        href='https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/4.0.0/github-markdown.min.css'>
    </link>
    <style class="styleTag"></style>
</head>

<body style="padding: 25px;">

    <div class="leftContent">
        <pre id="content"></pre>
    </div>


    <div class="rightContent">
        <pre id="resume"></pre>
    </div>
    
</body>
    <style id= 'styleTag'></style>
    <script src="resume.js"></script>
    <script>
        const interval = 8;//间隔时间
        let leftCount = 0;//左侧数字
        let rightCount = 0;

        var styleStr = styleContent.join('');//构建字符串
        var styleTag = document.getElementById('styleTag');//动态部分
        var content = document.getElementById('content');//内容
        var resume = document.getElementById('resume');//简历
        var leftContentEle = document.getElementsByClassName('leftContent')[0];
        var timeOutTimer;
        function addContentToLeft(){//向左侧与style添加内容
            content.innerHTML = styleStr.substring(0,leftCount);
            styleTag.innerHTML = styleStr.substring(0,leftCount);
            scrollToBotton(leftContentEle);
        }
        function showContent(){//显示简历之前
            if(leftCount < styleContent.slice(0,3).join('').length){
                leftCount++;
                addContentToLeft()
            }else{
                rightCount++//开始显示简历
                resume.innerHTML = resumeContent[0].substring(0,rightCount)
                if(rightCount > resumeContent[0].length){// 简历显示完成继续显示左边的内容
                    leftCount++
                    addContentToLeft()//继续向左边内容的添加

                    if(leftCount >= styleContent.slice(0,4).join('').length){
                        resume.innerHTML = marked(resumeContent[0].substring(0,rightCount));
                    }
                }

                if(leftCount > styleContent.slice(0,5).join('').length){
                    resume.className = 'markdown-body'
                }
            }
            if(leftCount > styleStr.length){
                reset();
            }else{
                requestAnimationFrame(showContent);
            }
        }
        function start(){
            clearTimeout();
            requestAnimationFrame(showContent)
        }
        function scrollToBotton(ele){
            if(ele){
                ele.scrollTop = ele.scrollHeight
            }
        }
        function reset(){
            timeOutTimer = setTimeout(function(){
                leftCount = 0;
                rightCount = 0;
                resume.className = '';
                resume.innerHTML = '';
            },3000)
        }
        function clearTimeout(){
            if(timeOutTimer){
                clearTimeout(timeOutTimer);
            }
        }
        start()
    </script>
</html>